<script>
export default {
  name: 'Test'
}
</script>

<template>
  <div class="role-container">
    <div class="app-container">
      <el-card class="mb-10">
        <div class="box">
          <div class="red">这里是红色</div>
          <div class="filter">
            <div class="red">这里不是红色，因为被过滤了</div>
            <div class="red-box">
              <div class="red">即使是子组件也不是红色，因为被过滤了</div>
            </div>
          </div>
        </div>
        <div class="red">这里不是红色</div>
      </el-card>
      <el-card class="mb-10">
        <div class="box2">
          <div>
            <div class="green">绿色文字</div>
            <div class="orange">
              数一数
              <span>有几只小鸭</span>
            </div>
            <div class="blue">文字</div>
          </div>
        </div>
      </el-card>
      <el-card>
        <h1 class="h1">标题一</h1>
        <h1 class="h2">标题二</h1>
        <p class="p1">段落1</p>
        <p class="p1">段落1</p>
        <p class="p1">段落1</p>
        <p class="p2">段落2</p>
        <p class="p2">段落2</p>
        <p class="p3">段落2</p>
      </el-card>
      <!--      <h1 class="fs">You'll want to savor every last drop in our coffee</h1>-->
      <button class="menu-btn" popovertarget="menu">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg" alt="" />
      </button>
      <div popover role="menu" id="menu">
        <button class="close-btn" popovertarget="menu" popovertargetaction="hide">
          <span>❌</span>
          <span class="sr-only">Close</span>
        </button>
        <ul>
          <li><a href="#">Typography</a></li>
          <li><a href="#">Foundations</a></li>
          <li><a href="#">Color</a></li>
          <li><a href="#">Interactions</a></li>
          <li><a href="#">Components</a></li>
          <li><a href="#">Responsive</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
<style lang="css">
@scope (.box) to (.filter) {
.red{
  color: red;
}
}
div:has(.green){
  color: green;
}
.mb-10{
  margin-bottom: 10px;
}
:where(.green,.orange,.blue):hover {
  color: red;
  text-decoration: underline;
}
.orange{
  color:orangered;
  span{
    color: #e8e8ac;
  }
}
:nth-child(2 of .p2){
  color: pink;
}
.fs{
  font-size: 64px;
  text-wrap: balance;
}
</style>
